<template>
	<view>
		<view class="search-nav">
			<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" @clear="onCancel" cancelButton="none" @input="onInput" /></view>
			<view class="p10-0">
				<text class="searchBtn" @click="onSearchBtn">搜索</text>
			</view>
		</view>
<!-- 		<view class="p0-15">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view v-for="item in dataType" :key='item.name' class="scroll-view-item_H">
					<view :class="form.type == item.id ? 'tabs_' : 'tabs'" @click="onSelectType(item.id)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view> -->
		<uni-row>
			<uni-col v-for="(item,index) in dataInfo" :key='index' :span="12" >
				<view class="p8 mt10" @click="onLink('info/info',item.id)"><image style="width: 100%;border-radius: 3px;" :src="item.cover" mode="aspectFill"></image></view>
				<view class="p0-8 title">{{item.title}}</view>
				<uni-row class="p8">
					<uni-col :span="18">
						<view class="text-left p0-8 user">
							<image style="width: 15px;height: 15px;" :src="item.user.head_img" mode="aspectFill" />
							<text class="ml5">{{item.user.name}}</text>
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="text-right p0-8 user"><uni-icons type="star" size="15"></uni-icons><text class="ml5">{{item.collect_num}}</text></view>
					</uni-col>
				</uni-row>
			</uni-col>
		</uni-row>
		<view class="fixed-bottom" v-show="!show">
			<view class="p0-8"><button class="default-button-push" @click="onForm()">+我要发布</button></view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="onChange">
			<view class="p15 overflow-y">
				<view class="text-right"><uni-icons @click="onClosePopup" type="clear" size="20"></uni-icons></view>
				<uni-forms label-position="top" ref="baseForm" :modelValue="subForm" >
					<uni-forms-item label="标题:" required>
						<uni-easyinput v-model="subForm.title" placeholder="请输入标题" />
					</uni-forms-item>
					<uni-forms-item label="内容:">
						<uni-easyinput type="textarea" v-model="subForm.content" placeholder="请输入内容" />
					</uni-forms-item>
					<uni-forms-item>
						<view class="example-body">
							<uni-file-picker limit="9" @select="onUpload" @delete="onDeleteImage" :value="subForm.fileLists" title="介绍图(最多选择9张图片)"></uni-file-picker>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="fixed-bottom">
				<view class="p0-8"><button class="default-button-push" :disabled="disabled" @click="save()">保存</button></view>
			</view>
		</uni-popup>
		<uni-load-more :status="status" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{page:1,type:0},
				selectType:0,
				dataType: [],
				subForm:{img:'',title:'',content:'',type:'0',fileLists:[]},
				images:[],
				dataInfo:[],
				status:'more',
				loadData : true,
				
				show:false,
				disabled:false,
			}
		},
		onShow() {
			// https://api.xinzhuvip.com/api2/edit_talk
			this.onGetData()
			// this.onGetType()
		},
		methods: {
			save(){
				let _this = this
				if(!this.subForm.title){
					uni.showToast({title: '请输入标题',icon: 'error',duration: 2000})
					return;
				}
				let img = []
				_this.subForm.fileLists.forEach(function(element) {
					if(element.url){
						img.push(element.url)
					}
				});
				this.subForm.img = JSON.stringify(img);
				if(!img.length){
					uni.showToast({title: '请选择图片',icon: 'error',duration: 2000})
					return;
				}
				this.subForm.id = this.id
				this.disabled = true
				this.$request_api('applet_api/interaction','PUT',this.subForm).then(res => {
					if(res.code == 200){
						uni.showToast({title: '发布成功',icon: 'success',duration: 2000})
						_this.form.page = 1
						_this.dataInfo = []
						_this.onGetData()
						_this.$refs.popup.close()
						_this.disabled = false
						_this.loadData = true
						return;
					}
					
					uni.showToast({title: res.msg,icon: 'error',duration: 2000})
					return;
				}).catch(err => {
					console.log(err)
				})
			},
			onClosePopup(){
				this.$refs.popup.close()
			},
			onGetData(){
				this.status = 'loading'
				if(!this.loadData){
					this.status = 'no-more'
					return false;
				}
				let _this = this
				this.$request_api('applet_api/interaction','POST',this.form).then(res => {
					_this.form.page++
					_this.dataInfo.count = res.data.total
					if(res.data.length == 0){
						_this.loadData = false
						_this.status = 'no-more'
					}
					res.data.forEach((e) => {
						e.cover = JSON.parse(e.img)[0]
					})
					_this.dataInfo.push(...res.data) 
				}).catch(err => {
					console.log(err)
				})
			},
			// onGetType(){
			// 	let _this = this
			// 	this.$request_api('/api2/talk_type','GET').then(res => {
			// 		_this.dataType = _this.$func.map_uniapp_name_arr(res.data)
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			onDeleteImage(e){
				let arr = []
				this.subForm.fileLists.forEach(function(element) {
					if(element.url != e.tempFilePath){
						arr.push(element)
					}
				});
				this.subForm.fileLists = arr
			},
			onUpload(chooseImageRes){
				let _this = this
				const tempFilePaths = chooseImageRes.tempFilePaths;
				const api_url = _this.$func.api
				tempFilePaths.forEach((e) => {
					let fileurl = _this.$func.imgToBase64(e, base64 => {
						if (base64) {
							uni.uploadFile({
								url: api_url+'upload/WxAppOneLoad', //仅为示例，非真实的接口地址
								filePath: e,
								name: 'file',
								header:{
									'Content-Type':'multipart/form-data',
								},
								formData: {
									key: 'post',
									fileurl: base64,
									name: 'file',
								},
								success: (uploadFileRes) => {
									uploadFileRes.data = JSON.parse(uploadFileRes.data)
									let obj = {url:uploadFileRes.data.data,name:e,extname:'png'}
									_this.subForm.fileLists.push(obj)
								}
								
							});
						} else {
							console.error('转换失败');
						}
					});
				})
				
			},
			onReachBottom() {
				this.onGetData()
			},
			onSelectType(e){
				this.form.page = 1
				this.form.type = e
				this.dataInfo = []
				this.onGetData()
			},
			onSearch(e){
				this.form.search = e.value
				this.form.page = 1
				this.dataInfo = []
				this.onGetData()
			},
			onInput(e){
				this.form.title = e
			},
			onSearchBtn(){
				this.form.page = 1
				this.dataInfo = []
				this.onGetData()
			},
			mapType(data){
				let obj = { name: '全部', id: 0 }
				data.unshift(obj)
				return data.map((item) => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/posts/"+url+"?id="+id
				});
			},
			onForm(e) {
				this.images = []
				this.subForm.img = ''
				this.subForm.fileLists = []
				console.log(this.subForm.fileLists)
				this.$refs.popup.open('bottom')
			},
			onChange(e){
				this.show = e.show
			}
		}
	}
</script>

<style scoped lang="scss">
.scroll-view_H {white-space: nowrap;width: 100%;}
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.user{font-size: .8rem;margin-top: 5px;}
.user image{position: relative;top: 3px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
.fixed-bottom{bottom: -1px;}
.fixed-bottom .default-button-push{border-radius: 25px;}
</style>
